<template>
    <div class="my">
      <header>
        <div class="account">
          <div><img src="/images/toux.jpg" alt=""></div>
          <h1>随便利_1145678</h1>
          <span>主页 ></span>
          <i class="iconfont icon-shezhi"></i>
        </div>
        <div class="order">
          <span class="titles">我的订单</span>
          <ul class="icons">   
         <li v-for="(item,index) in iconsList" :key="index">
        <img :src="item.imgUrl" alt="">
        <span>{{item.title}}</span>
         </li>
        </ul>
        </div>
        <div class="personal">
          <h2>个人服务</h2>
          <ul class="fuwu">
            <li>
              <i class="iconfont icon-youhuiquan"></i>
              <span>优惠券</span>
            </li>
            <li>
              <i class="iconfont icon-shouhuodizhi"></i>
              <span>收货地址</span>
            </li>
            <li>
              <i class="iconfont icon-kefu"></i>
              <span>客服</span>
            </li>
            <li>
              <i class="iconfont icon-dingdangdaishimingrenzheng"></i>
              <span>实名认证</span>
            </li>
          </ul>

        </div>
      </header>
        
 
        <Tabbar></Tabbar>
        </div>
</template>
<script>


import Tabbar from '../components/common/Tabbar.vue'
import Vue from 'vue';
import { AddressEdit } from 'vant';

Vue.use(AddressEdit);
export default {
    name:"My",
     components:{
       Tabbar
   },
    data() {
        return{
            iconsList:[
                {
                    id:1,
                    title:'待付款',
                    imgUrl:'./images/order1.png',

                },
                 {
                    id:2,
                    title:'待发货',
                    imgUrl:'./images/order2.png',

                },
                 {
                    id:3,
                    title:'待收货',
                    imgUrl:'./images/order3.png',

                },
                 {
                    id:4,
                    title:'待评价',
                    imgUrl:'./images/order4.png',

                },
            ]

        }
    }
  
};
    
    

</script>
<style scoped >
.account{
  width: 100%;
  height: 250px;
  display: flex;
  background-color: rgb(61, 114, 93);


}
.account div{
    margin-top: 100px;
    margin-left: 15px;
    width:70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid seashell;

  }
.account div img{
    
    width:70px;
    height: 70px;
    border-radius: 50%;
  
}
.account  h1{
    margin-top: 120px;
    margin-left: 15px;
    color: rgb(255, 255, 255);
    font-size: 22px;
    font-weight: 530;
}
.account  span{
  margin-top: 130px;
    margin-left: 15px;
    color: rgb(216, 206, 152);
    font-size: 13px;
}
.account i{
  position: absolute;
  right: 5px;
  top: 10px;
  font-size: 30px;
  color: rgb(224, 219, 160);
}
.order{
 margin: 0 auto;
    margin-top: 20px;
 width: 95%;
   height:100px;
     border-radius: 15px;
    background-color: rgb(61, 114, 93);
}
.icons{
    width: 100%;
   height:100px;
     border-radius: 15px;
    display: flex;
    justify-content: space-around;
     background-color: rgb(61, 114, 93);
}
.icons li{
    display:flex;
    flex-direction: column;
    align-items: center;

}
.icons img{
width: 43px;
height: 43px;
}
.icons span{
font-size: 14px;
color: rgb(205, 204, 164);

}
.titles{
 padding: 5px 8px;
 font-size: 16px;
color: rgb(255, 255, 255);
}
.personal{
  margin: 0 auto;
  margin-top: 70px;
  width: 95%;
}
.personal h2{
  color: aliceblue;
  font-weight: 530;
}
.fuwu{
  width: 100%;
  display:flex;
  justify-content: space-around;
  
}
.fuwu li{
  border-radius: 15px;
  width: 25%;
  height: 100px;
  background-color: rgb(64, 117, 95);
  display:flex;
    flex-direction: column;
    align-items: center;
}
.fuwu li i{
  margin-top: 30px;
  font-size: 30px;
  color: aliceblue;
  
}
.fuwu li span{
  color: rgb(202, 181, 157);
}

.my{
  height: 100vh;
  width: 100%;
  background-color: rgb(31, 31, 31);
}
</style>